<template>
  <view class="confirmation-wrapper">
    <ve-popup :modelValue="modelValue" @close="close" :maskClose="maskClose" :customStyle="{ zIndex: 1002 }">
      <view class="ve-modal">
        <view class="ve-modal-title v-modal-padding" v-if="titleText">
          {{ titleText }}
        </view>
        <view class="ve-modal-body v-modal-padding">
          <slot name="default"></slot>
        </view>
        <view class="ve-modal-footer">
          <text class="btn" v-if="showCancel" @tap="handleCancel()">{{ cancelText }}</text>
          <text class="btn ok" v-if="showConfirm" @tap="handleConfirm()">
            <view class="btn-body" :class="{ 'ok-disabled': loading }">
              <uni-load-more v-if="loading" iconType="circle" :showText="false" status="loading" />
              <text style="margin-left: 5px">{{ okText }}</text>
            </view>
          </text>
        </view>
      </view>
    </ve-popup>
  </view>
</template>
<script>
  /**
   * ve-modal 弹框
   * @property {Boolean} maskClose 遮罩点击是否关闭
   * @property {String} titleText 文本标题
   * @property {Boolean} showCancel 取消按钮控制
   * @property {Boolean} showConfirm 确认按钮控制
   * @property {String} cancelText 取消按钮文本
   * @property {String} okText 确认按钮文本
   */
  export default {
    name: 'secondary-confirmation',
    props: {
      modelValue: Boolean,
      asyncClose: {
        type: Boolean,
        default: false,
      },
      maskClose: {
        type: Boolean,
        default: true,
      },
      titleText: {
        type: String,
        default: '',
      },
      showCancel: {
        type: Boolean,
        default: true,
      },
      showConfirm: {
        type: Boolean,
        default: true,
      },
      cancelText: {
        type: String,
        default: '取消',
      },
      okText: {
        type: String,
        default: '确认',
      },
    },
    data() {
      return {
        loading: false,
      }
    },
    methods: {
      close() {
        this.$emit('update:modelValue', false)
        this.$emit('close')
        setTimeout(() => {
          this.loading = false
        }, 300)
      },
      handleCancel() {
        this.$emit('cancel')
        this.close()
      },
      handleConfirm() {
        if (this.asyncClose) {
          if (this.loading) return
          this.loading = true
          this.$emit('confirm')
        } else {
          this.$emit('confirm')
        }
      },
    },

    watch: {
      // 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态
      // 避免下次打开的时候，状态混乱
      modelValue(n) {
        if (n === true) this.loading = false
      },
    },
  }
</script>
<style lang="scss" scoped>
  .ve-modal {
    width: 702rpx;
    background: #ffffff;
    border-radius: 16rpx;
    position: relative;
    padding-top: 52rpx;
    &-padding {
      padding: 0 32rpx;
    }
    &-title {
      font-size: 32rpx;
      color: #1f2334;
      text-align: center;
      font-size: 32rpx;
      font-weight: 600;
      color: #3072f6;
      line-height: 38rpx;
    }
    &-body {
      padding: 32rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #191c27;
      line-height: 42rpx;
      text-align: center;
    }
    &-footer {
      display: flex;
      width: 100%;
      border-top: 1rpx solid #e5e5e5;
      .btn {
        flex: 1;
        text-align: center;
        font-size: 32rpx;
        font-weight: 400;
        color: #191c27;
        line-height: 98rpx;
        &:nth-child(2) {
          border-left: 1px solid #e5e5e5;
        }

        &.ok {
          color: #3072f6;
        }

        .btn-body {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .ok-disabled {
          color: #e5e5e5;
        }
      }
    }
  }
</style>
